<template>
  <view class="register" id="register">
    <view class="bgc1"></view>
    <view class="bgc2"></view>
    <view class="content-div">
      <view>填写{{ name }}信息</view>

      <view class="view-display1">
        <view class="parent-name">
          <u-input
            v-model="form.user_name"
            type="text"
            :border="true"
            :height="80"
            :clearable="false"
            border-color="#DCDCDC"
            :placeholder="'请输入' + name + '姓名'"
            :custom-style="{ borderRadius: '200rpx' }"
          />
        </view>
        <u-radio-group v-model="form.user_sex" :style="{ marginLeft: '20rpx' }">
          <u-radio
            active-color="#0ACC94"
            v-for="(item, index) in userList"
            :key="index"
            :name="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>

      <view @click="value = true" class="view-display">
        <u-input
          v-model="form.area"
          type="text"
          :border="false"
          :disabled="true"
          :style="{ width: '400rpx' }"
          placeholder="请选择地区"
        />
        <image src="@/static/index/right.png" class="prompt-style"></image>
      </view>

      <view @click="chooseSchool" class="view-display">
        <u-input
          v-model="form.school_name"
          type="text"
          :border="false"
          :disabled="true"
          placeholder="请选择你的学校"
        />
        <image src="@/static/index/right.png" class="prompt-style"></image>
      </view>

      <view class="view-display" @click="chooseClass" v-if="type == '2'">
        <u-input
          v-model="form.class_name"
          type="text"
          :border="false"
          :disabled="true"
          placeholder="请选择你的班级"
        />
        <image src="@/static/index/right.png" class="prompt-style"></image>
      </view>

      <view class="view-display2" style="border: none !important">
        <view class="parent-name1">
          <u-input
            v-model="form.code"
            type="number"
            :border="true"
            :height="80"
            :clearable="false"
            border-color="#DCDCDC"
            placeholder="请输入验证码"
            :custom-style="{ borderRadius: '200rpx' }"
          />
        </view>
        <u-button
          :custom-style="customStyle1"
          :disabled="smsDisable"
          @click="getCode"
        >
          {{ smsDisable == true ? smsButtonMsg : "获取验证码" }}
        </u-button>
      </view>

      <u-button type="success" @click="submit">确认</u-button>
    </view>

    <u-toast ref="regist" />

    <!-- 区域选择 -->
    <city-select
      v-model="value"
      @city-change="cityChange"
      ref="CitySelect"
    ></city-select>

    <!-- 学校list -->
    <u-select
      v-model="schoolListShow"
      value-name="school_id"
      label-name="name"
      @confirm="changeSchool"
      :list="schoolList"
    ></u-select>
    <!-- class list -->
    <u-select
      v-model="classListShow"
      value-name="class_id"
      label-name="class_name"
      @confirm="changeClass"
      :list="classList"
    ></u-select>
  </view>
</template>

<script>
import citySelect from "./components/citySelect";

export default {
  components: {
    citySelect,
  },
  data() {
    return {
      value: false,
      smsButtonMsg: "获取验证码",
      smsDisable: false,

      name: "", //申请人身份
      type: "", //2 为老师  3为校长
      schoolListShow: false, //学校弹窗
      classListShow: false, //教室弹窗
      customStyle1: {
        color: "#0ACC94",
        borderRadius: "20rpx",
        width: "240rpx",
      },
      customStyle: {
        color: "#0ACC94",
        borderRadius: "20rpx",
        width: "240rpx",
        marginTop: "100rpx",
      },
      userList: [
        {
          name: "男",
          disabled: false,
          value: 1,
        },
        {
          name: "女",
          disabled: false,
          value: 2,
        },
      ],

      // 请求表单
      form: {
        area: "",
        school_id: "",
        school_name: "",
        class_id: "",
        class_name: "",
        user_name: "",
        user_sex: 1,
        code: "",
      },

      // 学校list
      schoolList: [],
      //教室 list
      classList: [],
    };
  },
  methods: {
    /**
     * 发送短信
     */
    getCode() {
      var phone = this.vuex_userInfo.phone;
      this.$u.api
        .smsApi({ phone: phone })
        .then((res) => {
          uni.showToast({
            title: "获取成功",
            duration: 500,
            icon: "none",
          });
          //这里进行倒计时
          var time = 60;
          this.timer = setInterval(() => {
            if (time >= 1) {
              time = time - 1;
              this.smsDisable = true;
              this.smsButtonMsg = time + "S重新获取";
            } else {
              clearInterval(this.timer);
              this.smsDisable = false;
            }
          }, 1000);

          this.theSendCode = res.data;
        })
        .catch((err) => {
          this.$refs.regist.show({
            title: "验证码发送失败！",
            type: "error ",
          });
        });
    },
    /**
     * 城市区域选择
     */
    cityChange(e) {
      console.log(e);
      this.form.area =
        e.province.label + "-" + e.city.label + "-" + e.area.label;
      //然后根据 区域位置获取学校列表
      var form = {
        area_code: e.area.value,
      };
      this.$u.api
        .schoolApi(form)
        .then((res) => {
          this.schoolList = res.data;
        })
        .catch((err) => {
          this.schoolList = [];
          // 去除选择的学校
          this.form.school_id = "";
          this.form.school_name = "";
          this.form.class_name = "";
          this.form.class_id = "";
        });
    },

    /**
     * 选择学校
     */
    chooseSchool() {
      if (this.schoolList.length === 0) {
        this.$u.toast("所选区域没有学校，请更换");
      } else {
        this.schoolListShow = true;
      }
    },
    /**
     * 选择教室
     */
    chooseClass() {
      if (this.classList.length === 0) {
        this.$u.toast("所选学校没有班级，请更换");
      } else {
        this.classListShow = true;
      }
    },

    /**
     * 更换教室
     */
    changeClass(e) {
      this.form.class_id = e[0].value;
      this.form.class_name = e[0].label;
    },

    /**
     * 更换学校
     */
    changeSchool(e) {
      // console.log(e);
      this.form.school_id = e[0].value;
      this.form.school_name = e[0].label;
      // 获取教室
      var form = {
        school_id: e[0].value,
      };
      this.$u.api.classListApi(form).then((res) => {
        this.classList = res.data;
      });
    },

    /**
     * 提交表单
     */
    submit() {
      this.form.phone = this.vuex_userInfo.phone;
      this.form.id = this.vuex_userInfo.id;
      // 表单验证
      if (this.form.user_name === "" || this.form.user_name === null) {
        this.$u.toast("请输入姓名哦");
        return;
      }
      if (this.form.user_sex === "" || this.form.user_sex === null) {
        this.$u.toast("请选择性别哦");
        return;
      }
      if (this.form.area === "" || this.form.area === null) {
        this.$u.toast("请选择区域");
        return;
      }
      if (this.form.school_name === "" || this.form.school_name === null) {
        this.$u.toast("请选择学校");
        return;
      }

      //如果是老师 新增这个验证
      if (
        (this.form.class_name === "" || this.form.class_name === null) &&
        this.type === "2"
      ) {
        this.$u.toast("请选择班级");
        return;
      }

      // 判断是 审核老师 还是校长
      if (this.type === "2") {
        //老师
        // var form = {
        //   school_id:this.form.school_id,
        //   class_id:this.form.class_id,
        //   code:this.form.code,
        //   id:this.form.id,
        //   phone:this.form.phone,
        //   user_name:this.form.phone,
        //   phone:this.form.phone,
        // }
        this.$u.api.checkTeacherApi(this.form).then((res) => {
          this.$u.route({
            url: "/pages/status/status",
            params: {
              img: "success.png",
              title: "提交成功",
              text:
                "您的身份认证已提交，正在等待您所在园区校长审核,如有疑问，请联系客服：15882088710",
            },
          });
        });
      } else if (this.type === "3") {
        //校长 默认值
        this.form.class_id = 0;
        this.$u.api.checkPrincipalApi(this.form).then((res) => {
          this.$u.route({
            url: "/pages/status/status",
            params: {
              img: "success.png",
              title: "提交成功",
              text:
                "您的身份认证已提交，正在等待后台审核。 如有疑问，请联系客服：15882088710",
            },
          });
        });
      }
    },
    /**
     * 区域数据获取 并处理
     */
    getCityData() {
      this.$u.api.regionApi().then((res) => {
        var p = [];
        var c = [];
        var a = [];

        res.data.map((v, index) => {
          var provence = {
            label: v.name,
            value: v.adcode,
          };
          p.push(provence);
          //遍历城市
          c[index] = [];
          a[index] = [];

          v.districts.map((v1, index1) => {
            var city = {
              label: v1.name,
              value: v1.adcode,
            };
            c[index].push(city);
            a[index][index1] = [];

            v1.districts.map((v2, index2) => {
              var areas = {
                label: v2.name,
                value: v2.adcode,
              };
              a[index][index1].push(areas);
            });
          });
        });
        this.$refs.CitySelect.provincesList = p;
        this.$refs.CitySelect.citysList = c;
        this.$refs.CitySelect.areasList = a;
      });
    },
  },
  onLoad(option) {
    console.log(option);

    /**
     * title 填写
     */
    uni.setNavigationBarTitle({
      title: option.name + "申请信息填写",
    });

    this.name = option.name;
    this.type = option.type;
    this.getCityData();
  },
};
</script>

<style scoped lang ='scss' >
.register {
  height: 100vh;
  background-color: #f7f7f7;
  /* padding: 0 15rpx; */
  .bgc1 {
    height: 105rpx;
    background-color: #0acc94;
  }
  .bgc2 {
    height: 50.5 * 1.5rpx;
    background-color: #0acc94;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
  }
  .content-div {
    /* position: absolute;
    top: 70rpx; */
    height: 90vh;
    margin: -60 * 2rpx 30rpx 0 30rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    padding: 30rpx 15 * 2rpx;
    & > view {
      margin: 20rpx 0;
      &:nth-child(1) {
        font-size: 18 * 2rpx;
        color: #000000;
        font-weight: 700;
        margin-bottom: 40rpx;
      }

      .parent-name {
        width: 140 * 2rpx;
      }
      .parent-name1 {
        width: 170 * 2rpx;
      }
    }
    .view-display {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      border: 1rpx solid #dcdcdc;
      border-radius: 20rpx;
      padding: 0 10rpx;
      color: #999999;
    }
    .view-display1 {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      color: #999999;
    }
    .view-display2 {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: #999999;
      margin-bottom: 100rpx;
    }
    .protocol {
      color: #999999;
      font-size: 26rpx;
      margin-top: 200rpx;
      margin-bottom: 50rpx;
      display: flex;
      flex-basis: row;
      align-items: center;
      justify-content: center;
      .user-protocol {
        color: #11cc9d;
      }
    }
    .pass {
      font-size: 32rpx;
      margin-top: 20rpx;
      color: #11cc9d;
      text-align: center;
    }
    .cancle {
      color: #07c38f;
      font-size: 32rpx;
      text-align: center;
      margin-top: 30rpx;
    }
  }

  .prompt-style {
    width: 10.6rpx;
    height: 20rpx;
    margin-right: 4rpx;
  }
}
</style>




